<script setup lang="ts">
import layoutBg from "@/components/layoutBg/index.vue";
import huntingBg from "@/assets/images/page-bg.png";
import { ref } from "vue";
const formRef = ref();
const submitData = ref<any>({});
const formRules = {
	username: [{ required: true, message: "请输入", trigger: "blur" }],
	email: [{ required: true, message: "请输入", trigger: "blur" }]
};

const submitForm = async () => {
	console.log(formRef.value);
	try {
		await formRef.value.validate(); // 验证表单
		console.log("表单验证成功，提交数据：", submitData.value);
	} catch (error) {
		console.error("表单验证失败：", error);
	}
};
</script>

<template>
	<div>
		<layoutBg :img-bg="huntingBg">
			<div class="hidden md:block">
				<div class="text-center text-[49px] font-semibold text-white">Contact</div>
				<div class="flex justify-between w-full mb-5">
					<div class="my-5 p-5 text-content-bg text-white leading-7 text-[18px]" style="width: 45%">
						Let’s Work Together<br />
						Get in touch with Citech to bring your outdoor and hunting gear ideas to life. Whether you’re looking for custom
						designs, scalable manufacturing, or reliable supply chain support, we’re here to help.<br />
					</div>
					<div class="send-content" style="width: 45%">
						<el-form ref="formRef" :model="submitData" :rules="formRules" label-position="top">
							<el-form-item label="Name" prop="username">
								<el-input v-model="submitData.username" />
							</el-form-item>
							<el-form-item label="Email" prop="email">
								<el-input v-model="submitData.email" />
							</el-form-item>
							<el-form-item label="Subject">
								<el-input v-model="submitData.subject" />
							</el-form-item>
							<el-form-item label="Message">
								<el-input v-model="submitData.message" type="textarea" resize="none" />
							</el-form-item>
							<el-form-item>
								<el-button type="primary" link @click="submitForm"> Send </el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			</div>
			<div class="md:hidden">
				<div class="text-center text-[32px] font-semibold text-white">Contact</div>
				<div class="my-5 p-5 text-content-bg text-white leading-7 text-[18px]">
					Let’s Work Together<br />
					Get in touch with Citech to bring your outdoor and hunting gear ideas to life. Whether you’re looking for custom
					designs, scalable manufacturing, or reliable supply chain support, we’re here to help.<br />
				</div>
				<div class="send-content">
					<el-form ref="formRef" :model="submitData" :rules="formRules" label-position="top">
						<el-form-item label="Name" prop="username">
							<el-input v-model="submitData.username" />
						</el-form-item>
						<el-form-item label="Email" prop="email">
							<el-input v-model="submitData.email" />
						</el-form-item>
						<el-form-item label="Subject">
							<el-input v-model="submitData.subject" />
						</el-form-item>
						<el-form-item label="Message">
							<el-input v-model="submitData.message" type="textarea" resize="none" />
						</el-form-item>
						<el-form-item>
							<el-button type="primary" link @click="submitForm"> Send </el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</layoutBg>
	</div>
</template>

<style lang="scss" scoped>
.text-content-bg {
	// width: 45%;
	background-color: rgba(0, 0, 0, 0.65);
}
.send-content {
	// width: 45%;
	background-color: #fff;
	padding: 15px;
	border-radius: 10px;
}
</style>
